<template>
    <!-- 添加编辑角色 -->
        <el-dialog
        title="角色编辑"
        :visible.sync="dialogVisible"
        width="40%"
        :close-on-click-modal="false"
        :before-close="handleClose"  >
            <el-form label-width="80px" v-model="form" label-position="left">
                <el-form-item label='角色名称:'>
                    <el-input size="small" type='text' v-model="form.roleName" clearable placeholder="请填写角色名称" ></el-input>
                </el-form-item>
                <el-form-item label='角色编码:' v-if="type == 'add'">
                    <el-input size="small" type='text' v-model="form.roleCode" clearable placeholder="请填写角色编码" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancle">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">提交保存</el-button>
            </span>
        </el-dialog>
</template>
<script>
    export default {
        props: ['isShow', 'type', 'roleId'],
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            }
        },
        data() {
            return {
                form: {
                    roleName: '',
                    roleCode: ''
                }
            }
        },
        mounted() {
            if(this.type == 'edit') {
                this.getRoleDetailes()
            }
        },
        methods: {
            /**获取角色信息 */
            getRoleDetailes() {
                try {
                    this.$server.systemControlApi.getRoleDetails(this.roleId).then(res => {
                        this.form.roleName= res.data.roleName
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleSubmit() {
                try{
                    let {roleName, roleCode} = this.form;
                    if(this.type == 'add') {
                        if(roleName == '' || roleCode == '') {
                            this.$confirm('请填写角色名称、角色编码')
                        }else{
                            let params= {
                                roleCode: roleCode,
                                roleName: roleName
                            }
                            this.$server.systemControlApi.createSystemRole(params).then(res => {
                                // this.getRoleList()
                                // this.dialogVisible= false
                                this.$emit('cancelShow', false)
                                this.$emit('getRoleList')
                            
                            })
                        }
                    }else if(this.type == 'edit') {
                        let params= {
                            roleId: this.roleId,
                            roleName: roleName
                        }
                        this.$server.systemControlApi.editRoleDetails(params).then(res => {

                            this.$emit('cancelShow', false)
                            this.$emit('getRoleList')
                        
                        })
                    }

                }catch(err){this.$paramsError(err)}
            },
            handleCancle() {
                this.$emit('cancelShow', false)
                this.$emit('getRoleList')
               
            },
            handleClose() {
                this.$confirm('确定关闭?').then(_ => {
                    this.$emit('cancelShow', false)
                
                }).catch()
            }
        }
    }
</script>